<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        .search-container {
            background-image: url('https://img0.baidu.com/it/u=1346471640,3395845407&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .search-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }
        .search-content {
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="fire-red text-white shadow-md">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center py-3">
                    <div class="flex items-center">
                        <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-10 w-10 mr-2">
                        <span class="text-xl font-bold">火灾调查知识库平台</span>
                    </div>
                    <nav class="hidden md:flex space-x-1">
                        <a href="search.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-robot mr-1"></i> AI检索功能
                        </a>
                        <a href="report.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-cockpit.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                        <a href="user-center.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-user mr-1"></i> 个人中心
                        </a>
                    </nav>
                    <div class="flex items-center space-x-2">
                        <a href="login.html" class="text-white hover:text-gray-200 px-2 py-1">
                            <i class="fas fa-sign-in-alt mr-1"></i> 登录
                        </a>
                        <a href="register.html" class="bg-white text-red-600 hover:bg-gray-100 px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus mr-1"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 搜索区域 -->
        <section class="search-container py-20">
            <div class="search-content container mx-auto px-4 text-center">
                <h1 class="text-4xl font-bold text-white mb-6">火灾调查知识库平台</h1>
                <p class="text-xl text-gray-200 mb-8">集成火灾调查知识、图谱展示、智能检索、报告生成于一体的综合性平台</p>
                
                <div class="max-w-3xl mx-auto">
                    <div class="bg-white p-4 rounded-lg shadow-lg">
                        <div class="flex items-center mb-3">
                            <div class="flex-1">
                                <input type="text" placeholder="请输入关键词进行检索..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                            </div>
                            <button class="ml-2 px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none">
                                <i class="fas fa-search mr-1"></i> 搜索
                            </button>
                        </div>
                        
                        <div class="flex flex-wrap gap-2 text-sm text-gray-600">
                            <span class="font-medium mr-2">检索范围:</span>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600" checked>
                                <span class="ml-1">全文</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-1">主题</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-1">摘要</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="searchType" class="form-radio text-red-600">
                                <span class="ml-1">关键词</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 主要分类 -->
        <section class="py-10 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">知识分类</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <div class="bg-red-50 hover:bg-red-100 p-6 rounded-lg text-center shadow-sm transition duration-300 transform hover:-translate-y-1">
                        <i class="fas fa-balance-scale text-4xl text-red-600 mb-3"></i>
                        <h3 class="text-lg font-semibold mb-2">消防法律法规</h3>
                        <p class="text-gray-600 text-sm">消防安全相关法律、法规、标准及规范</p>
                    </div>
                    
                    <div class="bg-red-50 hover:bg-red-100 p-6 rounded-lg text-center shadow-sm transition duration-300 transform hover:-translate-y-1">
                        <i class="fas fa-file-alt text-4xl text-red-600 mb-3"></i>
                        <h3 class="text-lg font-semibold mb-2">火调报告</h3>
                        <p class="text-gray-600 text-sm">历史火灾调查报告与案例分析资料</p>
                    </div>
                    
                    <div class="bg-red-50 hover:bg-red-100 p-6 rounded-lg text-center shadow-sm transition duration-300 transform hover:-translate-y-1">
                        <i class="fas fa-landmark text-4xl text-red-600 mb-3"></i>
                        <h3 class="text-lg font-semibold mb-2">政府文件</h3>
                        <p class="text-gray-600 text-sm">消防安全相关政策文件及通知</p>
                    </div>
                    
                    <div class="bg-red-50 hover:bg-red-100 p-6 rounded-lg text-center shadow-sm transition duration-300 transform hover:-translate-y-1">
                        <i class="fas fa-shield-alt text-4xl text-red-600 mb-3"></i>
                        <h3 class="text-lg font-semibold mb-2">消防安全</h3>
                        <p class="text-gray-600 text-sm">消防安全知识、预防措施及实践指南</p>
                    </div>
                    
                    <div class="bg-red-50 hover:bg-red-100 p-6 rounded-lg text-center shadow-sm transition duration-300 transform hover:-translate-y-1">
                        <i class="fas fa-fire-extinguisher text-4xl text-red-600 mb-3"></i>
                        <h3 class="text-lg font-semibold mb-2">消防设备</h3>
                        <p class="text-gray-600 text-sm">消防器材、设备技术规范及使用指南</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门知识 -->
        <section class="py-10 bg-gray-100">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800">热门知识</h2>
                    <a href="#" class="text-red-600 hover:text-red-700 font-medium">查看更多 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 热门知识卡片 1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
                        <img src="https://q2.itc.cn/q_70/images03/20240712/292c3e819dbf4e07aa0be89c8e62e4c1.png" alt="火灾调查" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <div class="flex justify-between items-center mb-2">
                                <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">火调报告</span>
                                <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 1,234</span>
                            </div>
                            <h3 class="text-lg font-semibold mb-2">南安市仑苍镇仑苍大道212-1号店面“2023.12.27”火灾事故调查报告</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">2023年12月27日4时37分，泉州市消防救援支队指挥中心接到报警称南安市仑苍镇仑苍大道212-1号店面着火。该起火灾过火面积约15平方米，事故造成2人死亡、3人轻伤。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm"><i class="far fa-calendar-alt mr-1"></i> 2023-12-27</span>
                                <a href="#" class="text-red-600 hover:text-red-700">查看详情</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 热门知识卡片 2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
                        <img src="https://q7.itc.cn/images01/20250501/6a2347ca27c847ec86b746bbc4b459ba.jpeg" alt="消防设备" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <div class="flex justify-between items-center mb-2">
                                <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">消防设备</span>
                                <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 986</span>
                            </div>
                            <h3 class="text-lg font-semibold mb-2">永宁县消防救援大队 火灾事故认定书</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">火灾事故基本情况：2023年4月16日15时37分许，银川市消防救援支队指
                                挥中心接到报警称永宁县胜利乡京东智能产业园发生火灾，火灾造成银川金马鞍物
                                流有限公司A2号厂房及宁夏极和兔供应链有限公司、</p>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm"><i class="far fa-calendar-alt mr-1"></i> 2023-09-28</span>
                                <a href="#" class="text-red-600 hover:text-red-700">查看详情</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 热门知识卡片 3 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
                        <img src="https://pic.rmb.bdstatic.com/bjh/bc17ab449bd/250130/288a42ed59aad3d482e343fc700726de.jpeg" alt="法律法规" class="w-full h-48 object-cover">
                        <div class="p-5">
                            <div class="flex justify-between items-center mb-2">
                                <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">法律法规</span>
                                <span class="text-gray-500 text-sm"><i class="far fa-eye mr-1"></i> 765</span>
                            </div>
                            <h3 class="text-lg font-semibold mb-2">关于塔城地区乌苏市“11·22”火灾事故调查的报告</h3>
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">2024年11月22日，塔城地区乌苏市发生一起平房住宅建筑火灾事故，造成1人死亡。11月26日，乌苏市人民政府办公室印发了《关于成立乌苏市“11·22”火灾事故调查组的通知》，</p>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500 text-sm"><i class="far fa-calendar-alt mr-1"></i> 2023-11-02</span>
                                <a href="#" class="text-red-600 hover:text-red-700">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 平台特色 -->
        <section class="py-10 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-2xl font-bold mb-8 text-center text-gray-800">平台特色功能</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div class="text-center p-6">
                        <div class="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-project-diagram text-2xl text-red-600"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">知识图谱</h3>
                        <p class="text-gray-600 text-sm">可视化火灾调查知识关联，支持交互式探索与分析</p>
                    </div>
                    
                    <div class="text-center p-6">
                        <div class="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-robot text-2xl text-red-600"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">AI智能检索</h3>
                        <p class="text-gray-600 text-sm">基于自然语言理解的智能检索，快速定位所需信息</p>
                    </div>
                    
                    <div class="text-center p-6">
                        <div class="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-file-alt text-2xl text-red-600"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">报告自动生成</h3>
                        <p class="text-gray-600 text-sm">基于AI技术，自动生成规范的火灾调查报告</p>
                    </div>
                    
                    <div class="text-center p-6">
                        <div class="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-chart-line text-2xl text-red-600"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">数据分析</h3>
                        <p class="text-gray-600 text-sm">多维度火灾数据可视化分析，揭示规律与趋势</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部 -->
        <footer class="bg-gray-800 text-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关于我们</h3>
                        <p class="text-gray-400 text-sm">火灾调查知识库平台致力于提供全面的火灾调查知识和智能工具，助力消防安全工作的开展。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">快速链接</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><a href="#" class="hover:text-white">首页</a></li>
                            <li><a href="#" class="hover:text-white">知识检索</a></li>
                            <li><a href="#" class="hover:text-white">知识图谱</a></li>
                            <li><a href="#" class="hover:text-white">火调报告</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">联系我们</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><i class="fas fa-envelope mr-2"></i> contact@firekb.com</li>
                            <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                            <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区学院路消防大厦</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关注我们</h3>
                        <div class="flex space-x-3">
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-qq"></i>
                            </a>
                        </div>
                        <p class="text-gray-400 text-sm mt-3">扫描二维码关注公众号</p>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-4 text-center text-gray-400 text-sm">
                    <p>© 2023 火灾调查知识库平台 版权所有</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 您可以在这里添加Vue的初始化代码和其他JavaScript功能
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 